<!--关注我/配置  _D音H5扫码-->
<template>
  <div class="ele-body">
    <el-form
      :hide-required-asterisk="true"
      ref="form"
      :model="form"
      label-width="50px"
      @keyup.enter.native="submit"
      @submit.native.prevent
    >
      <el-card>
        <div class="flex-align-center keyword-top">
          <div class="keyword-title">关注我</div>
        </div>
        <el-row :gutter="15" class="flex-align-center m-bottom20">
          <el-col :xs="12" :sm="12" :lg="5" :xl="5">
            <el-form-item label="昵称" style="margin-bottom: 0">
              <el-input
                v-model="form.nickname"
                placeholder="请输入昵称"
                clearable
              />
            </el-form-item>
          </el-col>
          <el-col :xs="12" :sm="12" :lg="5" :xl="5">
            <el-form-item label="状态" style="margin-bottom: 0">
              <el-select
                v-model="form.status"
                placeholder="请选择状态"
                class="ele-block"
                clearable
              >
                <el-option label="已启用" :value="1" />
                <el-option label="未启用" :value="2" />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :xs="24" :sm="24" :lg="14" :xl="14" style="padding-left:40px;">
            <el-button
              icon="el-icon-zoom-out"
              size="small"
              type="primary"
              class="colorBlue"
              @click="see()"
            >
              查询
            </el-button>
            <el-button
              icon="el-icon-refresh-right"
              size="small"
              class="resetting-btn"
              @click="resetting()"
            >
              重置
            </el-button>
          </el-col>
        </el-row>

        <ele-pro-table
          ref="table"
          size="mini"
          :columns="columns"
          :datasource="datasource"
          :selection.sync="selection"
          :need-page="true"
          :hideOnSinglePage="false"
        >
          <!--头部按钮-->
          <template v-slot:toolbar>
            <div class="btn-class flex-align-center">
              <!--<el-button type="primary" @click="addAccredit">
                新增
              </el-button>-->
              <el-button type="primary" @click="addAccredit">
                添加授权
              </el-button>
              <el-button type="danger" @click="delMoreAccount">
                删除
              </el-button>
            </div>
          </template>
          <!-- 头像列 -->
          <template v-slot:head="{ row }">
            <div style="line-height: 1">
              <el-avatar v-if="row.head" :src="row.head" :size="35" />
            </div>
          </template>
          <!--状态——开关（只存在一个为开）-->
          <template v-slot:status="{ row }">
            <el-switch
              @change="switchClick(row)"
              :active-value="1"
              :inactive-value="2"
              v-model="row.status">
            </el-switch>
          </template>
          <!--操作-->
          <template v-slot:action="{ row }">
            <el-link
              type="danger"
              :underline="false"
              @click.stop="delUser(row)"
            >
              删除
            </el-link>
          </template>
        </ele-pro-table>
      </el-card>
    </el-form>
<!--    新增——账号弹框 -->
    <followAccount ref="follow" @getData="getData"></followAccount>
  </div>
</template>

<script>
  import followAccount from "./components/followAccount.vue"
  import {accreditPage,accreditDel,saveFollowMe, accreditUpdate} from "@/api/explosiveCode/follow"
  import {accountUser, accountQuery} from "@/api/matrixManage/accountList";
  export default {
    name: "index",
    components:{followAccount},
    data(){
      return{
        username: this.$store.state.user.info.username,
        /*datasource:[
          {
            id:1,
            head:"http://yunhunjian123.oss-cn-shanghai.aliyuncs.com/1686822490465.jpg",
            nickname:"111",
            playCount:1,
            status:true,
            createTime:"2023-6-15 00:00:00"
          },{
            id:2,
            head:"http://yunhunjian123.oss-cn-shanghai.aliyuncs.com/1686818898324.png",
            nickname:"昵称",
            playCount:2,
            status:false,
            createTime:"2023-6-15 16:00:00"
          },{
            id:3,
            head:"http://yunhunjian123.oss-cn-shanghai.aliyuncs.com/1686822490465.jpg",
            nickname:"111",
            playCount:3,
            status:false,
            createTime:"2023-6-15 16:58:00"
          },
        ],*/
        form:{},
      // 0：D音 1：K手 （代表打开D音二维码弹框）
      typeIndex:0,
        // 表格选中数据
        selection: [],
        // 表格列配置
        columns: [
        {
          columnKey: 'selection',
          type: 'selection',
          width: 45,
          align: 'center'
        },
        {
          prop: 'head',
          label: '头像',
          align: 'center',
          showOverflowTooltip: true,
          slot: 'head'
        },
        {
          prop: 'nickname',
          label: '用户昵称',
          align: 'center',
          showOverflowTooltip: true
        },
        {
          prop: 'openId',
          label: 'openId',
          align: 'center',
          showOverflowTooltip: true
        },
        {
          prop: 'status',
          label: '状态',
          align: 'center',
          slot:'status',
          showOverflowTooltip: true
        },
        {
          prop: 'createTime',
          label: '创建时间',
          align: 'center',
          showOverflowTooltip: true,
        },
        {
          label: '操作',
          columnKey: 'action',
          // width: 230,
          align: 'center',
          resizable: false,
          slot: 'action',
          hideInSetting: true,
          showOverflowTooltip: true,
          fixed: 'right'
        }
      ],
        dataForm:{
          types:2,  // types：1用户库 2关注我
          merchantId: this.$store.state.user.info.merchantId
        },
    }
    },
    created(){
      this.$nextTick(()=>{
        this.$refs['follow'].initType()
      })
    },
    methods:{
      getData(e){
        /*if(e){
          this.dataForm.nickname=e.nickname
        }
        else{
          delete this.dataForm.nickname
        }*/
        let param={
          merchantId: this.$store.state.user.info.merchantId, //1.商户id
          head: e.head,  //2.头像
          nickname: e.nickname,  // 3.昵称
          openId: e.openId,   // 4.open_id
          types: 2
        }
        console.log("param",param,'this.dataForm',this.dataForm)
        saveFollowMe(param)
          .then((data) => {
            //merchantId获取选择账号的数据，并查询表格
            this.reload()
            console.log('data--', data)
          })
          .catch((e) => {
            this.$message.error(e);
          });
      },
      switchClick(e){
        console.log("e",e)
        accreditUpdate({
          status:e.status,
          id:e.id,
          merchantId: this.$store.state.user.info.merchantId
        })
          .then((data) => {
            //merchantId获取选择账号的数据，并查询表格
            this.reload()
            console.log('data--', data)
          })
          .catch((e) => {
            this.$message.error(e);
          });
        /*if(e.status==false){
          return
        }
        else{
          for(let i=0;i<this.datasource.length;i++){
            if(this.datasource[i].id != e.id){
              this.datasource[i].status=false
            }

          }
        }*/
      },
      /* 刷新————表格数据源 */
      datasource({ page, limit, where, order }) {
        return accreditPage({ ...where, ...order, page, limit,...this.dataForm,...this.form });
      },
      /* 刷新表格 */
      reload(where) {
        this.$refs.table.reload({ page: 1, where: where });
      },
      // 添加授权
      async addAccredit(){
        let code=''
        // types：1用户库 2关注我
        code = await accountUser(this.$store.state.user.info.merchantId,2)
        window.open(code.data)
        /*this.$nextTick(()=>{
          this.$refs['follow'].show()
        })*/
      },
      // 删除
      delMoreAccount(){
        if (!this.selection.length) {
          // 请选择需要操作的数据
          this.$message.error('请选择数据');
          return;
        }
        var ids=this.selection.map(item => {
          return item.id
        })
        console.log('删除点击事件his.selection===', this.selection ,'ids',ids)
        this.delAccounts(ids)
      },
      /* 单个删除 */
      delUser(row) {
        console.log("单个删除",row)
        let ids=[]
        ids.push(row.id)
        console.log("ids====",ids)
        this.delAccounts(ids)
      },
      delAccounts(ids){
        this.$confirm('此操作将永久删除, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          console.log("322222222222",ids)
          accreditDel({
            ids:ids,
            types:2,  // types：1用户库 2关注我
          })
            .then((data) => {
              this.reload()
              this.$message.success('删除成功!');
            })
            .catch((e) => {
              this.$message.error(e);
            });
        }).catch(() => {
          this.$message.info('已取消删除');
        });
      },
      see(){
        if(!this.form.nickname){
          delete this.form.nickname
        }
        this.reload()
      },
      resetting(){
        this.form.nickname=''
        this.form.status=''
        delete this.form.nickname
        delete this.form.status
        this.reload()
      }
    }
  }
</script>

<style scoped lang="less">
  .keyword-top{
    padding:4px 4px 20px;
    .keyword-title{
      font-size: 20px;
      line-height: 24px;
      margin-right: 20px;
      color: #000000;
    }
    .border{
      border-radius: 5px;
      overflow: hidden;
      .no-select-type,.select-type{
        width: 68px;
        height: 29px;
      }
      .select-type{
        background: #1E6CEB;
        color: #FFFFFF;
      }
      .no-select-type{
        border: 1px solid #F5F5F5;
        color: #ABAFB5;
      }
    }
  }
  .resetting-btn{
    background: #F5F5F5;
  }
</style>
